<template>
	<view class="">
		<headerinfo></headerinfo>
		<u-navbar title="用户反馈" :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar>
		<!-- <view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">推荐</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">最新</view>
		</view> -->
		<view class="feedBack">
			<view class="list" v-for="(item,index) in 10" :key="index">
				<view class="userInfo">
					<image src="../../static/bofang.png" mode="aspectFill" class="touxiang"></image>
					<view class="name">
						韩斌
					</view>
					<view class="date">
						2020-12-12
					</view>
				</view>
				<view class="Textbox">
					<view class="title">
						我感觉这个系统有问题
					</view>
					<view class="desc">
						我感觉这个系统有问题具体情况看下面的图片...
					</view>
					<view class="imageBox">
						<image @click="priview(index)" v-for="(item,index) in 2" :key="index"
							src="/static/img/noData.0afbefdf.png" mode="aspectFill"></image>

					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 150rpx;"></view>
		<view class="addBtn" @click="toPage('/pages/feedback/add')">
			我要发言
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				titleStyle: {
					color: '#fff'
				},
				bgColor: '#de4849',
				Inv: 0,
			};
		},
		onShow() {

		},
		onLoad(e) {},
		methods: {
			priview(index) {
				// uni.previewImage({
				// 	urls:[''],
				// 	current:index
				// })
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.feedBack {
		.list {
			border-bottom: 1px solid #e6e6e6;

			.userInfo {
				padding: 20rpx 30rpx;
				position: relative;
				padding-left: 110rpx;

				.name {
					font-size: 30rpx;
				}

				.touxiang {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.date {
					font-size: 24rpx;
					color: #aaa6a6;
				}
			}

			.Textbox {
				padding: 10rpx 30rpx;

				.desc {
					margin-top: 20rpx;
					font-size: 28rpx;
				}

				.imageBox {
					image {
						width: 140rpx;
						height: 140rpx;
						margin-right: 20rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #999;
		height: 90upx;
		line-height: 90upx;
		margin: 0 50rpx;
	}

	.inv-h-se {
		color: #de4849;
		border-bottom: 4upx solid #de4849;
	}
	
	.addBtn{
		position: fixed;
		bottom: 10rpx;
		width: 700rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #de4849;
		color: #fff;
		left: 50%;
		z-index: 10;
		transform: translateX(-50%);
		font-size: 30rpx;
	}
</style>